<template>
  <div>
    <div class="father">
      <!-- 设置头 -->
      <div class="heads">
        <van-sticky>
          <div class="titles">
            <van-nav-bar title="设置">
              <template #left>
                <van-icon
                  name="arrow-left"
                  size="18"
                  @click="$router.push('home/me')"
                />
              </template>
            </van-nav-bar>
          </div>
          <!-- 账号管理 -->
          <div class="number" @click="$router.push('account')">
            <span>账号管理</span>
            <div>
              <img src="../../assets/meset.jpg" alt="" />
              <van-icon name="arrow" />
            </div>
          </div>
        </van-sticky>
      </div>
      <!-- body1 -->
      <div class="bodys">
        <van-cell title="消息通知设置" is-link to="notice" />
        <van-cell title="聊天设置设置" is-link to="chat" />
        <van-cell title="隐私设置" is-link to="conceal" />
      </div>
      <!-- body2 -->
      <div class="bodyse">
        <van-cell title="关于我们" is-link to="about" />
        <van-cell title="清楚缓存" is-link @click="Clear" />
      </div>
      <!-- 退出登录 -->
      <div class="btn">
        <button>退出登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    Clear() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "您确定要清除本地缓存数据? (含页面访问,聊天等相关数据)",
        })
        .then(() => {
          this.$toast.success("清除成功");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.father {
  background-color: #f7f7f7;
  height: 100vh;
  // 头样式
  .heads {
    .titles {
      .van-icon {
        border: 1px solid #888;
        border-radius: 50%;
        padding: 1px;
        color: #888;
        &:active {
          opacity: 0.4;
        }
      }
    }
    .number {
      display: flex;
      justify-content: space-between;
      height: 44px;
      line-height: 44px;
      background-color: white;
      padding: 0 16px;
      &:active {
        background-color: darken(#f2f3f5, 1%);
      }
      span {
        font-size: 14px;
        color: #323233;
      }
      > div {
        display: flex;
        align-items: center;
        img {
          height: 32px;
          border-radius: 50%;
          padding-right: 2px;
        }
      }
    }
  }
  // 中间1部分
  .bodys {
    margin-top: 10px;
    // background-color: white;
  }
  // 中间部分2
  .bodyse {
    margin-top: 10px;
  }
  .btn {
    display: flex;
    justify-content: center;
    button {
      background-color: #f8f8f8;
      color: white;
      width: 300px;
      height: 40px;
      line-height: 40px;
      border-radius: 6px;
      font-size: 17px;
      border: none;
      position: fixed;
      bottom: 50px;
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>
